<farris-tabs [value]="'added'" [contentFill]="true" [autoTitleWidth]="true" class="h-100 px-3 pt-2 f-tabs-header-sm"
  (tabChange)="hidePopoverContainers()">
  <farris-tab title="新增字段" [id]="'added'">
    <ng-template #content>
      <farris-treetable #addFieldTree class="mx-1" [data]="addedTreeData" [columns]="treeCols" [idField]="'id'"
        [fixedHeader]="true" [width]="'100%'" [showFilterBar]="false" [showIcon]="false" [fit]="true">
        <ng-template farrisTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of columns">
              <ng-container *ngIf="col.field!=='select'"> {{col.title}} </ng-container>
              <ng-container *ngIf="col.field==='select'">{{col.title}}
                <div class="custom-control custom-checkbox d-inline ml-2">
                  <input type="checkbox" class="custom-control-input" id="CheckAddFieldAll"
                    [(ngModel)]="addFieldSelectedAll" (ngModelChange)="clickAddFieldSelectAllCheckbox()" />
                  <label class="custom-control-label" [for]="'CheckAddFieldAll'"></label>
                </div>
              </ng-container>
            </th>

          </tr>
        </ng-template>
        <ng-template farrisTemplate="body" let-rowNode let-rowIndex="index" let-rowData="rowData" let-columns="columns">
          <tr [selectRow]="rowNode" [rowIndex]="rowIndex" [dblclick]="true" [selectRowDisabled]="true">
            <td *ngFor="let col of columns; let i = index" style="padding: 0.25rem 0.75rem">
              <farris-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></farris-treeTableToggler>
              <ng-container *ngIf="col.field==='name'">
                <span [title]="rowData.name">{{rowData.name}}</span>
              </ng-container>
              <ng-container *ngIf="col.field==='bindingField'">
                <span [title]="rowData.bindingField">{{rowData.bindingField}}</span>
              </ng-container>

              <div *ngIf="col.field==='select' && rowNode.node.selectable" class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" [id]="rowData.id"
                  [(ngModel)]="addSelected[rowData.id]"
                  (ngModelChange)="clickAddSelectCheckbox(addSelected[rowData.id])" />
                <label class="custom-control-label" [for]="rowData.id"> </label>
              </div>
            </td>
          </tr>
        </ng-template>
      </farris-treetable>
    </ng-template>
  </farris-tab>
  <farris-tab title="删除字段" [id]="'deleted'">
    <ng-template #content>
      <farris-treetable #treeTable class="mx-1" [data]="deletedTreeData" [columns]="treeCols" [idField]="'id'"
        [fixedHeader]="true" [width]="'100%'" [showFilterBar]="false" [showIcon]="false" [cascadeCheck]="false"
        [fit]="true">
        <ng-template farrisTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of columns">
              <ng-container *ngIf="col.field!=='select'"> {{col.title}} </ng-container>
              <ng-container *ngIf="col.field==='select'">{{col.title}}
                <div class="custom-control custom-checkbox d-inline ml-2">
                  <input type="checkbox" class="custom-control-input" id="CheckDeleteFieldAll"
                    [(ngModel)]="deleteFieldSelectedAll" (ngModelChange)="clickDeleteFieldSelectAllCheckbox()" />
                  <label class="custom-control-label" [for]="'CheckDeleteFieldAll'"></label>
                </div>
              </ng-container>
            </th>

          </tr>
        </ng-template>
        <ng-template farrisTemplate="body" let-rowNode let-rowIndex="index" let-rowData="rowData" let-columns="columns">
          <tr [selectRow]="rowNode" [rowIndex]="rowIndex" [dblclick]="true" [selectRowDisabled]="true">
            <td *ngFor="let col of columns; let i = index" style="padding: 0.25rem 0.75rem">
              <farris-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></farris-treeTableToggler>
              <ng-container *ngIf="col.field==='name'">
                <span [title]="rowData.name">{{rowData.name}}</span>
              </ng-container>
              <ng-container *ngIf="col.field==='bindingField'">
                <span [title]="rowData.bindingField">{{rowData.bindingField}}</span>
              </ng-container>

              <div *ngIf="col.field==='select' && rowNode.node.selectable" class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" [id]="rowData.id"
                  [(ngModel)]="deleteSelected[rowData.id]"
                  (ngModelChange)="clickDeleteSelectCheckbox(deleteSelected[rowData.id])" />
                <label class="custom-control-label" [for]="rowData.id"> </label>
              </div>
            </td>
          </tr>
        </ng-template>
      </farris-treetable>
    </ng-template>
  </farris-tab>
  <farris-tab title="更改字段" [id]="'others'">
    <ng-template #content>
      <div class="f-utils-fill-flex-column">
        <div class="border-bottom p-2">
          <farris-radiogroup [horizontal]="true" [textField]="'text'" [valueField]="'value'" [data]="updateRadioTypes"
            [(ngModel)]="selectAllChange" (changeValue)="selectAllChanged()">
          </farris-radiogroup>
        </div>

        <div class="flex-fill f-utils-overflow-hidden pt-2" [style.display]="!selectAllChange?'flex':'none'">
          <div class="f-utils-overflow-xaya f-col-w3 scrollXFarrisTree">
            <farris-treetable #changeLeftTree [data]="changeLeftTreeData" [columns]="leftTreeCols" [idField]="'id'"
              [showCheckbox]="false" (nodeSelected)="handleTreeSelection($event)" [showIcon]="false"
              [showHeader]="false" [showBorder]="false">
            </farris-treetable>
          </div>
          <div [ngClass]="showChangeContrast?'f-col-w9 f-utils-flex-column':'f-col-w9 d-none'">
            <div class="alert alert-warning" *ngIf="changeFieldTypeEditorTypeList.indexOf(selectedTreeKey)>-1">
              字段类型/编辑器类型已更改，请选中以下所有变更！更新后将自动替换相关控件。
            </div>
            <div class="alert alert-warning" *ngIf="changeFieldTypeList.indexOf(selectedTreeKey)>-1">
              字段类型已更改，请选中以下所有变更！
            </div>
            <div class="alert alert-warning" *ngIf="changeComplexFieldTypeList.indexOf(selectedTreeKey)>-1">
              字段类型已更改，更新后需要手动删除已经绑定此关联字段的控件，并重新添加。
            </div>
            <div class="f-utils-fill-flex-column">
              <farris-treetable #treeTable [data]="changeContrast[selectedTreeKey]" [columns]="changedTreeCols"
                [idField]="'propPath'" [fixedHeader]="true" [width]="'100%'" [showFilterBar]="false" [showIcon]="false"
                [cascadeCheck]="false" [fit]="true">
                <ng-template farrisTemplate="header" let-columns>
                  <tr>
                    <th *ngFor="let col of columns">
                      <ng-container *ngIf="col.field!=='select'"> {{col.title}} </ng-container>
                      <ng-container *ngIf="col.field==='select'">{{col.title}}
                        <div class="custom-control custom-checkbox d-inline ml-2">
                          <input type="checkbox" class="custom-control-input" id="CheckAll"
                            [(ngModel)]="selectedAll[selectedTreeKey]" (ngModelChange)="clickSelectAllCheckbox()" />
                          <label class="custom-control-label" [for]="'CheckAll'"></label>
                        </div>
                      </ng-container>
                    </th>

                  </tr>
                </ng-template>
                <ng-template farrisTemplate="body" let-rowNode let-rowIndex="index" let-rowData="rowData"
                  let-columns="columns">
                  <tr [selectRow]="rowNode" [rowIndex]="rowIndex" [dblclick]="true" [selectRowDisabled]="true">
                    <td *ngFor="let col of columns; let i = index" style="padding: 0.25rem 0.75rem">
                      <farris-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></farris-treeTableToggler>
                      <ng-container *ngIf="col.field ==='oldValue' && rowNode.node.isObject">
                        <span [title]="rowData[col.field]" farrisPopover [popover]="oldValueTemplate" container="body"
                          placement="left" [popoverContext]="rowData"
                          triggers="click">{{rowData.oldValueShowName||'点击查看'}}</span>
                      </ng-container>
                      <ng-container *ngIf="col.field ==='newValue' && rowNode.node.isObject">
                        <span [title]="rowData[col.field]" farrisPopover [popover]="newValueTemplate" container="body"
                          placement="right" [popoverContext]="rowData"
                          triggers="click">{{rowData.newValueShowName||'点击查看'}}</span>
                      </ng-container>
                      <ng-container
                        *ngIf="(col.field ==='oldValue' || col.field ==='newValue') && !rowNode.node.isObject">
                        <span [title]="rowData[col.field]">{{rowData[col.field]}}</span>
                      </ng-container>
                      <ng-container *ngIf="col.field ==='propName' || col.field ==='propCode'">
                        <span [title]="rowData[col.field]">{{rowData[col.field]}}</span>
                      </ng-container>
                      <div *ngIf="col.field==='select' && rowNode.node.selectable"
                        class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" [id]="rowData.fieldId+'.'+rowData.propPath"
                          [(ngModel)]="changeSelected[rowData.fieldId][rowData.propPath]" />
                        <label class="custom-control-label" [for]="rowData.fieldId+'.'+rowData.propPath"> </label>
                      </div>
                    </td>
                  </tr>
                </ng-template>
              </farris-treetable>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
  </farris-tab>
</farris-tabs>


<ng-template #btns>
  <button type="button" class="btn btn-secondary" (click)="clickCancel()">取消</button>
  <button type="button" class="btn btn-primary" (click)="clickOK()">确定</button>
</ng-template>



<ng-template #oldValueTemplate let-oldValue="oldValue">
  <div>
    <pre style="max-height: 200px;"> {{showPropObject(oldValue)}}</pre>
  </div>
</ng-template>

<ng-template #newValueTemplate let-newValue="newValue">
  <div>
    <pre style="max-height: 200px;"> {{showPropObject(newValue)}}</pre>
  </div>
</ng-template>